<template>
  <el-dialog title="分配线索" :visible.sync="open">
    <el-tag>
      你选择了{{ids.length}}个线索
    </el-tag>
    <el-form :model="form" ref="form" :rules="rules">
      <el-row>
        <el-col :span="12">
          <el-form-item label="部门">
            <treeselect v-model="form.deptId"
                        :options="deptOptions"
                        :show-count="true"
                        placeholder="请选择归属部门"
                        :disable-branch-nodes="true"
                        @input="changeDept"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="用户" prop="userId">
            <el-select v-model="form.userId" placeholder="请选择用户">
              <el-option v-for="item in deptUserOptions" :label="item.nickName" :value="item.userId"
                         :key="item.userId"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <!--      <el-form-item label="活动区域" :label-width="formLabelWidth">-->
      <!--        <el-select v-model="form.region" placeholder="请选择活动区域">-->
      <!--          <el-option label="区域一" value="shanghai"></el-option>-->
      <!--          <el-option label="区域二" value="beijing"></el-option>-->
      <!--        </el-select>-->
      <!--      </el-form-item>-->
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="open = false">取 消</el-button>
      <el-button type="primary" @click="submitForm">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import {listUser, deptTreeSelect} from "@/api/system/user";
  import {getToken} from "@/utils/auth";
  import Treeselect from "@riophae/vue-treeselect";
  import "@riophae/vue-treeselect/dist/vue-treeselect.css";
  import {addRecord} from "../../../../api/crm/record";

  export default {
    name: "assign",
    components: {Treeselect},
    data() {
      return {
        ids: [],
        open: false,
        form: {
          userId: null,
          deptId: null,
        },
        // 部门树选项
        deptOptions: [],
        deptId: null,
        deptUserOptions: [],
        rules: {
          userId: [{required: true, message: '用户不能为空', trigger: 'blue'}],//页面规则
          deptId: [{required: true, message: '部门不能为空', trigger: 'blue'}],
        },
      }
    },
    created() {
      this.getDeptTree()
    },
    methods: {
      /** 查询部门下拉树结构 */
      getDeptTree() {
        deptTreeSelect().then(response => {
          this.deptOptions = response.data;
        });
      },
      changeDept(val) {
        this.form.userId = null;
        if (val) {
          listUser({deptId: val}).then(resp => {
            this.deptUserOptions = resp.rows;

          })
        } else {
          this.deptUserOptions = [];

        }
      },
      submitForm() {
        this.$refs.form.validate(valid => {
          if (valid) {
            this.open = false;
            // this.form.id=this.id;
            let assignRecordList = this.idsToList();
            addRecord(this.idsToList()).then(resp => {
              if (resp.code == 200) {
                this.$modal.msgSuccess('分配成功')
                this.open = false;
                this.$emit('ok');

              }
            })
          }
        })
      },
      resetForm() {
        this.form = {
          deptId: null,
          userId: null,
        }
      },

      idsToList() {
        let list = [];
        let userName = this.deptUserOptions.find(item => item.userId == this.form.userId).userName;
        console.log(userName)
        for (let id of this.ids) {
          let item = {
            assignId: id,
            type: 'CLUE',//枚举对象的名字
            userId: this.form.userId,
            userName: userName,
            deptId: this.form.deptId,
          }
          list.push(item)
        }
        return list
      }
    }
  }
</script>

<style scoped>

</style>
